<template>
	<popup-bottom :show="show" @close="closeSkuBox">
		<view class="sku-box">
				<view class="sku-header container">
					<image class="goods-img bg-white" :src="selectSkuInfo.thumbnail"></image>
					
					<view class="sku-goods-info">
						<view class="money" :style="{color:themeColor}">
							<text class="symbol fs-26">￥</text>
							<text class="amount fs-38">{{selectSkuInfo.price| toFixed2}}</text>
						</view>
						<view class="stock fs-24">
							库存{{selectSkuInfo.enable_quantity}}件
						</view>
						<view class="fs-24">
							已选："{{selectSkuInfo | formatterSkuSpec}}"
						</view>
					</view>
				</view>
				<view class="container sku-item">
					<view v-if="mySpecifications.length>0" class="sku-name">规格</view>
				</view>
				<view class="container sku-item flex align-center">
					<view class="" v-for="(sku,sIndex) in mySpecifications" :key="sku_sidx">
						<!-- <view class="sku-name">{{sku.goods_name}}</view> -->
						<view class="sku-content">
							<text 
								class="sku-content-item" 
								:style="{
									border: selectedIndex===sIndex?`${borderWidth}px solid ${themeColor}`:`${borderWidth}px solid transparent`,
									color:selectedIndex===sIndex?themeColor:'#333',
									backgroundColor:selectedIndex===sIndex?'white':'#f5f5f5' }" 
								@click="selectSku(sIndex,sku)"
							>{{sku.spec_list[0].spec_value}}</text>
						</view>
					</view>
				</view>
				<view class="sku-item container count">
					<view class="sku-name">数量</view>
					<view class="count-box">
						<text class="minus" :class="{disabled:buyCount<=1}" @click="handleBuyCount('minus')">-</text>
						<!-- <input class="count-content" v-model="buyCount" :disabled="selectSkuInfo.enable_quantity<=0"/> -->
						<text class="count-content">{{buyCount}}</text>
						<text class="add" :class="{disabled:buyCount>=selectSkuInfo.enable_quantity}" @click="handleBuyCount('add')">+</text>
					</view>
				</view>
				<view class="btn-group flex align-center justify-center" style="height: 100rpx;">
					<view class="cu-capsule round" style="height:80%;width:70%;">
						<view class='cu-tag bg-join-cart' style="height: 100%;width: 50%;" @tap="handleSku">
							<text class="text-df text-white padding">加入购物车</text>
						</view>
						<view class="cu-tag bg-theme" style="height: 100%;width: 50%;" :class="{disabled:selectSkuInfo.enable_quantity==0}" :style="{backgroundColor:themeColor}" @click="handleConfirm">
							<text class="text-df text-white padding">{{selectSkuInfo.enable_quantity>0?'立即购买':'缺货中'}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="confirm-btn container" :class="{disabled:selectSkuInfo.enable_quantity==0}" :style="{backgroundColor:themeColor}" @click="handleConfirm">{{selectSkuInfo.enable_quantity>0?'立即购买':'缺货中'}}</view> -->
			</view>
	</popup-bottom>
</template>

<script>
	import PopupBottom from './popup-bottom'
	export default {
		components:{
			PopupBottom
		},
		filters: {
			toFixed2: function (value) {
			  if(!value) return '0.00'
			  return Number(value).toFixed(2)
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			themeColor: {
				type: String,
				default: '#1ac792'
			},
			combinations: {
				type: Array,
				default(){
					return []
				}
			},
			specifications: {
				type: Array,
				default(){
					return []
				}
			},
			defaultSelectIndex: {
				type: Number,
				default: 0
			},
			combinationsProps: {
				type: Object,
				default(){
					return {
						id: 'id',
						value: 'value',
						thumbnail: 'thumbnail',
						price: 'price',
						stock: 'stock'
					}
				}
			},
			specificationsProps: {
				type: Object,
				default(){
					return {
						sku_id: 'sku_id',
						list: 'list',
						name: 'name'
					}
				}
			},
		},
		data() {
			return {
				buyCount: 1,
				selectedIndex: 0,
				borderWidth: uni.upx2px(2),
				mySpecifications: [],
				selectSkuInfo: {},
				selectedActive:0
			}
		},
		watch:{
			specifications(val){
				this.initSkuData()
			},
			selectSkuInfo(val){
				console.log('规格',val)
				if(val.enable_quantity<1){
					this.buyCount = 0
				}
			}
		},
		// computed: {
		// 	sku_id() {
		// 		return this.specificationsProps.sku_id
		// 	},
		// 	speList() {
		// 		return this.specificationsProps.list
		// 	},
		// 	speName() {
		// 		return this.specificationsProps.goods_name
		// 	},
			
		// 	thumbnail() {
		// 		return this.combinationsProps.thumbnail
		// 	},
		// 	price() {
		// 		return this.combinationsProps.price
		// 	},
		// 	cbStock() {
		// 		return this.combinationsProps.enable_quantity
		// 	}
		// },
		created() {
			if(this.specifications.length) {
				this.initSkuData()
			}
		},
		methods: {
			initSkuData() {
				this.selectedIndex = this.defaultSelectIndex?this.defaultSelectIndex:0
				this.selectSkuInfo = this.combinations[this.selectedIndex]
				this.selectSkuInfo.sidx = this.selectedIndex
				console.log(this.combinations[this.selectedIndex])
				this.mySpecifications = JSON.parse(JSON.stringify(this.specifications))
				// console.log(this.mySpecifications,'mySpecifications')
				this.mySpecifications.map((item,idx) => {
					// console.log('1111==',item)
					// if(idx==0){
						//当前规格组合值
						const selects = item
						//每类规格对应其列表的下标 并记录在属性sidx在mySpecifications的子对象中
						const sIndex = idx
						this.$set(item,'sidx',idx)
					// }
				})
				console.log(this.mySpecifications,'mySpecifications')
			},
			selectSku(sIndex,index) {
				console.log(sIndex,index)
				this.selectedIndex = sIndex
				let list = this.mySpecifications
				this.selectSkuInfo = this.combinations[sIndex]
				// list.map((item,index1) =>{
				// 	if(sIndex===index1){
				// 		item.sidx = 0
				// 	}else{
				// 		item.sidx = 1
				// 	}
				// })
				this.mySpecifications =list
				// const selectInfo = this.mySpecifications.reduce((prev,cur) => {
				// 	if(prev) {
				// 		return prev+','+cur[this.speList][cur.sidx]
				// 	}else {
				// 		return cur[this.speList][cur.sidx]
				// 	}
				// },'')
				// this.selectedIndex = this.combinations.findIndex(item => item[this.cbValue] === selectInfo)
				// this.selectSkuInfo = this.combinations[this.selectedIndex]
				if(this.selectSkuInfo.enable_quantity === 0) {
					this.buyCount = 0
				}
				if(this.selectSkuInfo.enable_quantity !== 0) {
					this.buyCount = 1
				}
			},
			handleBuyCount(type) {
				if(type === 'minus') {
					if(this.buyCount <= 1) return
					this.buyCount = this.buyCount*1 - 1
				}
				if(type === 'add') {
					if(this.buyCount >= this.selectSkuInfo.enable_quantity) return
					this.buyCount = this.buyCount*1 + 1
				}
			},
			closeSkuBox() {
				let result = {}
				if( this.buyCount>0){
					result = this.selectSkuInfo
					result.count = this.buyCount*1
				}
				this.$emit('close',result)
			},
			handleConfirm() {
				if(this.selectSkuInfo.enable_quantity>0){
					let result = {}
					if( this.buyCount>0){
						result = this.selectSkuInfo
						result.count = this.buyCount*1
					}
					this.$emit('confirm', result)
				}
			},
			handleSku(){
				if(this.selectSkuInfo.enable_quantity>0){
					let result = {}
					if( this.buyCount>0){
						result = this.selectSkuInfo
						result.count = this.buyCount*1
					}
					this.$emit('joinCart', result)
				}
			}
		}
	}
</script>

<style>
	page {
		font-size: 28upx;
		color: #333333;
	}
</style>
<style lang="scss" scoped>
	@mixin flex-center {
		display: flex;
		align-items: center;
	}

	@mixin flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	$font-color-light: #999999;
	$page-bg-color-grey: #f5f5f5;

	.fs-24 {
		font-size: 24upx;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.fs-38 {
		font-size: 38upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;
	}

	.sku-box {
		min-height: 500upx;
		background-color: white;
		padding-bottom: 20upx;
		.sku-header {
			display: flex;
			padding: 40upx 0 20upx;
			.goods-img {
				width: 200upx;
				height: 200upx;
				border-radius: 6upx;
				border: 4upx solid white;
				flex: none;
				margin-top: -80upx;
			}
		}
		.sku-goods-info {
			margin-left: 20upx;
			.money {
				border: none;
				padding-bottom: 0;
			}
			.stock {
				color: $font-color-light;
			}
		}
		.sku-item {
			padding: 30upx 0;
			.sku-name {
				font-size: 30upx;
			}
			.sku-content {
				// border-bottom: 2upx solid $page-bg-color-grey;
				padding: 20upx 0;
				// @include flex-center;
				// flex-wrap: wrap;
				.sku-content-item {
					padding: 16upx 20upx;
					border-radius: 6upx;
					margin: 0 30upx 20upx 0;
				}
			}
			&.count {
				@include  flex-center;
				justify-content: space-between;
				.count-box {
					@include flex-center;
					text,.count-content {
						@include flex-center-center;
						width: 70upx;
						height: 70upx;
						font-size: 32upx;
						border: 2upx solid $page-bg-color-grey;
					}
					.add,.minus {
						font-size: 44upx;
					}
					.count-content {
						border-width: 2upx 0;
						text-align: center;
					}
				}
			}
		}
		.confirm-btn {
			@include flex-center-center;
			height: 80upx;
			border-radius: 80upx;
			color: white;
			font-size: 32upx;
			margin-top: 10upx;
		}
	}

	[class*=disabled] {
		color: $font-color-light;
		opacity: .7;
	}
</style>
